<template>
  <div>
    <router-view></router-view>
    <!-- <input type="text" v-model="first" />
    <input type="text" v-model="last" />
    <p>{{ full }}</p>
    <p>{{ full }}</p>
    <p>{{ full }}</p>

    <hr />
    全选 <input type="checkbox" v-model="all" />
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="checkbox" v-model="item.done" /><span>{{
          item.name
        }}</span>
      </li>
    </ul> -->

    <button @click="add">按钮</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
// eslint是校验规则  prettier是自动修复工具 也有自己的规则
// 计算属性 本质就是根据一个或多个数据算出来一个结果 求和
export default {
  data() {
    return {
      first: 'zhang',
      last: 'san',
      list: [
        { id: 1, name: '吃饭', done: false },
        { id: 2, name: '睡觉', done: true },
        { id: 3, name: '打豆豆', done: false }
      ],
      arr: ['pink', 'blue', 'yellow']
    }
  },
  methods: {
    // 把函数作为插值表达式的时候，必须写后面的小括号 渲染的才是函数的返回值，否则渲染的函数体
    // full() {
    //   console.log('函数被执行')
    //   return this.first + this.last
    // }
    add() {
      // this.arr.push('purple')
      this.arr[3] = 'purple'
      this.$forceUpdate()
      // this.$set(this.arr, 3, 'purple')
    }
  },
  computed: {
    full() {
      console.log('computed被执行')
      return this.first + this.last
    },
    // 当我们发现计算属性需要双向绑定的时候，需要用计算属性的完整的写法
    // all() {
    //   // every,some,forEach,map,reduce
    //   return this.list.every((item) => item.done === true)
    // }
    // 计算属性的完整的写法
    all: {
      get() {
        return this.list.every((item) => item.done === true)
      },
      set(newVal) {
        this.list.forEach((item) => (item.done = newVal))
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>
